<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Demonstration</title>
    <style>
        #main_div {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="main_div"></div>
<button id="btn_canvas_1">画布1</button>
<button id="btn_canvas_2">画布2</button>

<canvas id="canvas_1" width="100" height="100" style="display:none;"></canvas>
<canvas id="canvas_2" width="100" height="100" style="display:none;"></canvas>

<script>
    // Canvas initialization and drawing
    function initCanvas(canvasId, text) {
        const canvas = document.getElementById(canvasId);
        const context = canvas.getContext('2d');
        context.fillStyle = 'skyblue';
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = 'black';
        context.font = '18px Arial';
        context.textAlign = 'center';
        context.fillText(text, canvas.width / 2, canvas.height / 2);
    }

    // Initial drawing on canvases
    initCanvas('canvas_1', '图层1');
    initCanvas('canvas_2', '图层2');

    // Button click handlers
    document.getElementById('btn_canvas_1').addEventListener('click', function() {
        const mainDiv = document.getElementById('main_div');
        const canvas = document.getElementById('canvas_1');
        mainDiv.style.backgroundImage = `url({canvas.toDataURL()})`;
    });

    document.getElementById('btn_canvas_2').addEventListener('click', function() {
        const mainDiv = document.getElementById('main_div');
        const canvas = document.getElementById('canvas_2');
        mainDiv.style.backgroundImage = `url({canvas.toDataURL()})`;
    });
</script>

</body>
</html>
